<template>
<div class="section" :style="{'height':offsetheight+'px'}">
<div class="a" :style="{'width':offsetwidth+'px', 'height':offsetheight+'px'}">


	<img src="https://img.hidlq.com/image/cuanyue/a3-s-1.jpg" 
	:style="{'height':offsetheight+'px', 'transform': 'translate3d(-' + offsetX + 'px, 0px, 0px)'}"  >


	<div class="a1"
	:style="{'top' : 20 + 'px', 'left' : 20 + 'px'}"
	>
	    <el-radio-group v-model="what">
	      <el-radio-button 
	      label="qiyezixun">企业资讯</el-radio-button>
	      <el-radio-button 
	      label="shichanghuodong">市场活动</el-radio-button>
	      
	    </el-radio-group>
	</div>



	<div v-show="what == 'qiyezixun'" class="a2"
	:style="{'top' : 120 + 'px', 'left' : offsetwidth * 0.5 - 250 + 'px'}"
	>
		<div class="h2 mt10 pointer"
		v-for="item in qiyezixundata"
		@click="info(item)"
		>{{item.title}}</div>
	</div>

	<div v-show="what == 'shichanghuodong'" class="a2"
	:style="{'top' : 120 + 'px', 'left' : offsetwidth * 0.5 - 250 + 'px'}"
	>
		<div class="h2 mt10 pointer"
		v-for="item in shichanghuodongdata"
		@click="shichanghuodonginfo(item)"
		>{{item.title}}</div>
	</div>
	
</div>

</div>
</template>

<script>

import { mapGetters } from 'vuex'
import { qiyezixun, shichanghuodong } from './data'

export default {
	
	name : 'cuanyuexinwenzixun',
	
	data () {
		return {
		  	what : this.$route.query.what,

		  	offsetheight : document.documentElement.clientHeight - 60,    //获取当前页面的高度
			offsetwidth : document.documentElement.clientWidth,    //获取当前页面的高度

			imgWidth : 1400,
			imgHeight : 500,

			qiyezixundata : qiyezixun,
			shichanghuodongdata : shichanghuodong,
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		...mapGetters([
			
		]),

		bili () {
			return this.offsetheight / this.imgHeight;
		},

		offsetX () {
			return (this.imgWidth * this.bili - this.offsetwidth) * 0.5;
		},
	},

	methods : {
		info (item) {
			console.log(item);
			this.$router.push({
	    		'name' : 'cuanyuexinwenxiangqing',
	    		'query' : {'what' : 'qiyezixun', 'id' : item.id}
	    	});
		},

		shichanghuodonginfo (item) {
			this.$router.push({
	    		'name' : 'cuanyuexinwenxiangqing',
	    		'query' : {'what' : 'shichanghuodong', 'id' : item.id}
	    	});
		},
	},

	watch : {
	    
	},

	mounted () {
		
	},

}
</script>

<style scoped>
.section{
	overflow: hidden;
}
.a {
	position: relative;
}
.a1 {
	position: absolute;
	animation-delay: 1s;
	animation-duration: 1s;
}

.a2 {
	position: absolute;
	animation-delay: 1s;
	animation-duration: 1s;
	color: #fff;
	width: 500px;
}
</style>
